<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title-item {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="app"></div>
<!--引入react核心库-->
<script src="../React-js/react.development.js"></script>
<!--引入reac-dom 用于支持react操作dom-->
<script src="../React-js/react-dom.development.js"></script>
<!--引入babel 用于讲jsx语法转js语法-->
<script src="../React-js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写text/babel  使用babel解析*/
const title = [
    'Angular',
    'React',
    'Vue'
]
//创建虚拟dom
const VDOM = <h1 id="title" className="title">
    <h2>前端js框架列表</h2>
    <ul>
        {title.map((item, index) => <li className="title-item" key={index}>{item}</li>)}
    </ul>
</h1>
//渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById('app'))
// console.log(ReactDOM)
</script>
</body>
</html>